<template>
  <div class="goods-list">
    <MyHeader title="商品列表页"></MyHeader>

    <MyTable :list="list">
      <!-- v-slot:header -->
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>

      <!-- 具名插槽 + 作用域插槽一起使用 -->
      <!-- 注意事项: 一个 template 上不能有多个 v-slot -->
      <!-- v-slot:body="scope" -->
      <!-- #body="scope" -->
      <!-- scope: { row: item } -->
      <!-- <template #body="scope"> -->
      <template #body="{ row }">
        <td>{{ row.id }}</td>
        <td>{{ row.goods_name }}</td>
        <td>{{ row.goods_price }}</td>
        <td>
          <input
            v-model.trim="row.inputValue"
            @keydown.esc="row.inputValue = ''"
            @keydown.enter="add(row)"
            @blur="row.inputVisible = false"
            v-focus 
            v-if="row.inputVisible" 
            type="text">
          <button v-else @click="row.inputVisible = true"  class="btn btn-primary btn-sm">+Tag</button>
          <br>
          <span 
          style="margin-right: 5px" 
          class="badge bg-warning text-dark" 
          v-for="(item, index) in row.tags" :key="index">
            {{ item }}
          </span>
        </td>
        <td>
          <!-- 重点: 事件绑定写在哪里, 事件处理函数就在哪个组件中 -->
          <button @click="del(row.id)" class="btn btn-danger btn-sm">删除</button>
        </td>
      </template>
    </MyTable>
  </div>
</template>

<script>
// 目标1: 渲染数据
// 1.1 在 main.js 中给 axios 配置默认基地址
// 1.2 在 MyGoodsList.vue 中的 created 发送请求获取数据, 将数据保存至 data
// 1.3 将数据传递给 MyTable.vue
// 1.4 在 MyTable.vue 中循环创建 tr 渲染数据
// 1.5 给删除按钮添加 bootstrap 样式

// 目标2: 使用插槽提高表格的灵活性
// 2.1 在 MyTable.vue 中使用 <slot></slot> 占位并设置 name 属性
// 2.2 在 MyGoodsList.vue 中使用 <template></template> 包裹要传入的标签, 并使用 v-slot 指令指定具体的名称
// 2.3 由于 tbody 中的 td 需要用到循环出来的数据, 所以还需要使用作用域插槽将数据传递给 MyGoodsList.vue 的 template 处

// 目标3: 渲染徽标
// 3.1 使用 v-for 循环 tags 创建 span
// 3.2 去 bootstrap 官网查找徽标类名样式进行修改

// 目标4: 删除数据
// 4.1 给删除按钮绑定点击事件, 事件处理函数写在当前组件中
// 4.2 点击时传入 id
// 4.3 根据 id 找到索引并删除对应的数据

// 目标5: 添加标签
// 5.1 准备 +Tag 按钮和文本框
// 5.2 使用 v-if 和 v-else 控制两者的互斥关系 (需要使用 row.inputVisible 属性)
// 5.3 给按钮绑定点击事件, 点击时将 row.inputVisible 设置为 true
// 5.4 使用自定义指令, 绑定给 input 实现自动聚焦
// 5.5 给 input 绑定失去焦点事件, 修改 inputVisible 为 false
// 5.6 给 input 绑定键盘按下事件, .esc 修饰符实现清空文本框
// 5.6 使用 .enter 修饰符实现非空校验及添加数据 (事件传参传入 row)

import MyHeader from '../components/MyHeader.vue'
import MyTable from '../components/MyTable.vue'

export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  },
  components: {
    MyHeader,
    MyTable
  },
  data() {
    return {
      list: [],
      // isShow: true
    }
  },
  async created() {
    const res = await this.$axios.get('/api/goods')
    // console.log(res.data.data)
    this.list = res.data.data
  },
  methods: {
    del(id) {
      // 根据 id 找到对应数据的索引
      let index = this.list.findIndex(item => item.id === id)
      // 删除数据
      this.list.splice(index, 1)
    },
    add(row) {
      if (row.inputValue.length === 0) return alert('请输入内容')
      row.tags.push(row.inputValue)
      row.inputValue = ''
    }
  }
}
</script>

<style lang="less" scoped>
.goods-list {
  padding-top: 45px;
}
</style>